<template>
  <div class="Schedule">
    <div @click="back" class="schedule-back">
      <img src="../../assets/img/cinema-left.png" alt="" />
    </div>

    <div>
      <div class="schedule-title fz18 mb5">
        {{ cinema.name }}
      </div>

      <div class="schedule-main">
        <div class="schedule-main-top fz12" @click="tocinemaInfo">
          <div v-for="item in cinema.services" :key="item.name">
            {{ item.name }}
          </div>
          <span class="more" v-if="cinema.services">&gt;</span>
        </div>

        <div class="schedule-main-area">
          <div class="schedule-main-area-left">
            <img src="../../assets/img/cinema-location.png" alt="" />
          </div>
          <span class="ellipsis">{{ cinema.address }}</span>
          <div class="schedule-main-area-right">
            <img src="../../assets/img/cinema-phone.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <!-- 中间部分分二个部分  轮播图（bg 轮播  三角）  info-->
    <div class="schedule-middle">
      <div class="schedule-wrap">
        <swiper
          class="schedule-wrap-list"
          ref="mySwiper"
          :options="swiperOptions1"
        >
          <swiper-slide v-for="info in showFilm" :key="info.filmId">
            <img :src="info.poster" alt="" srcset="" class="swiper-img" />
          </swiper-slide>
        </swiper>

        <div class="schedule-wrap-triangle">
          <img src="../../assets/img/cinema-triangle.png" alt="" srcset="" />
        </div>
      </div>

      <div class="schedule-info">
        <div class="schedule-info-title">
          <span class="pr10">{{ currentFilm.name }}</span>
          <span>{{ currentFilm.grade }}分</span>
        </div>
        <div class="schedule-info-detail fz12 ellipsis">
          {{ currentFilm.category }}| 0分钟 |
          <span v-for="actor in currentFilm.actors" :key="actor.name">{{
            actor.name
          }}</span>
        </div>

        <div class="schedule-info-more">
          <img src="../../assets/img/cinema-right.png" alt="" srcset="" />
        </div>
      </div>
    </div>

    <!-- list 分两个部分 date（轮播图）  和 buy（左中右三个部分）  -->
    <div class="cinema-list">
      <div class="cinema-list-date fz14">
        <swiper :options="swiperOptions">
          <swiper-slide
            v-for="(time, index) in currentFilm.showDate"
            :key="time"
            :class="{ current: currentStyle == index }"
          >
            <span @click="reqSchedule(time, index)">{{
              moment.unix(time).format("M月D日")
            }}</span>
          </swiper-slide>
        </swiper>
      </div>

      <div class="cinema-list-buy">
        <div
          class="cinema-list-buy-item"
          @click="toLogin(item.scheduleId)"
          v-for="item in scheduleList"
          :key="item.scheduleId"
        >
          <div class="cinema-list-buy-item-left">
            <div>
              {{ moment.unix(item.showAt).format("HH:mm") }}
            </div>
            <div class="fz12 colorg">
              {{ moment.unix(item.endAt).format("HH:mm") }}散场
            </div>
          </div>
          <div class="cinema-list-buy-item-middle">
            <div class="buy-price-language">
              <div>{{ item.filmLanguage }}{{ item.imagery }}</div>
              <div class="fz12 colorg">{{ item.hallName }}</div>
            </div>
            <div class="cinema-list-buy-item-ticket"></div>
          </div>
          <div class="cinema-list-buy-item-right">
            <div class="cinema-list-buy-price fz16">
              ￥{{ item.salePrice / 100 }}
            </div>
            <div class="cinema-list-buy-ticket ml10 fz12">购票</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "cinemaSchedule",

  data() {
    return {
      //影院的信息
      cinema: "",
      //影院的所有电影列表
      showFilm: [],
      //电影每日排档
      scheduleList: [],
      // 当前电影的信息
      currentFilm: "",

      // 定义日期的样式
      currentStyle: 0,
      swiperOptions: {
        slidesPerView: 3,
        spaceBetween: 60,
      },
      //轮播图一页只显示一张：重复绑定同一个swiperOptions
      swiperOptions1: {
        //  默认显示第几张
        // initialSlide:3,
        effect: "coverflow",
        slidesPerView: 3,
        centeredSlides: true,
        spaceBetween: 20,
        observer:true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents:true,//修改swiper的父元素时，自动初始化swiper
        slideToClickedSlide:true,
        // 通过this.activeIndex获取图片的索引，去查找showFilm第几个元素
        on: {
          slideChange: () => {
            // 指向vue
            let index = this.$refs.mySwiper.swiperInstance.activeIndex;
            this.currentFilm = this.showFilm[index];
            let that = this;
            // this.reqSchedule(that.currentFilm.showDate[0],0);
          },
        },
      },
    };
  },
  computed:{
    token(){

      // 获取本地存储的token值
      return this.$store.state.token ||JSON.parse(sessionStorage.getItem("token"));
    }
  },
  created() {
    let that = this;
    that.axios.all([that.getCinemaInfo(), that.getShowFilm()]).then(
      that.axios.spread(function(cinemaInfoRes, showFilmRes) {
        // 3个请求现在都执行完成
        that.cinema = cinemaInfoRes.data.data.cinema;
        // 获取影院所有的电影列表
        that.showFilm = showFilmRes.data.data.films;
        // 默认当前的电影为电影列表的第一个
        that.currentFilm = that.showFilm[0];
      })
    );
  },

  mounted() {},
  watch: {
    // 通过currentFilm去判断轮播的触发
    currentFilm(newVal) {
      let that = this;
      let cinemaId = Number(that.$route.params.id);
      let filmId = that.currentFilm.filmId;
      that.$store.commit("saveFilmInfo",this.currentFilm)
      let date = that.currentFilm.showDate[0];
      // 获取默认电影的排挡
      this.axios
        .get(process.env.VUE_APP_BASE_URL, {
          headers: {
            "X-Host": "mall.film-ticket.schedule.list",
           'X-Token': that.token
          },
          params: {
            filmId,
            cinemaId,
            date,
            k: 2588482,
          },
        })
        .then((res) => {
          that.scheduleList = res.data.data.schedules;
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },

  methods: {
    getCinemaInfo() {
      let that = this;
      let cinemaId = that.$route.params.id;
      return this.axios.get(process.env.VUE_APP_BASE_URL, {
        headers: {
          "X-Host": "mall.film-ticket.cinema.info",
          // 'X-Token': that.token

        },
        params: {
          cinemaId,
          k: 4222982,
        },
      });
    },

    getShowFilm() {
      let cinemaId = this.$route.params.id;
      return this.axios.get(process.env.VUE_APP_BASE_URL, {
        headers: {
          "X-Host": "mall.film-ticket.film.cinema-show-film",
          // 'X-Token': that.token

        },
        params: {
          // cinemaId: 4071,
          cinemaId,
          k: 4222983,
        },
      });
    },
    // 对应时间的电影排挡
    reqSchedule(time, index) {
      this.currentStyle = index;

      let that = this;
      let cinemaId = Number(that.$route.params.id);
      let filmId = that.currentFilm.filmId;
      let date = time;
      // get请求时使用params报错，Cannot read property indexOf of undefined
      // 解决方式将参数一起写在url中

      this.axios
        .get(
          process.env.VUE_APP_BASE_URL +
            "/?filmId=" +
            filmId +
            "&cinemaId=" +
            cinemaId +
            "&date=" +
            date +
            "&k=7754214",
          {
            headers: {
              "X-Host": "mall.film-ticket.schedule.list",
              'X-Token': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhZ2VudElkIjoiMzAwMCIsInRpbWVzdGFtcCI6MTYyOTYwODkxOSwidXNlcklkIjozMTYxODcyN30.nMtlW_bMntcBfRn2RBIwIEQd8ENJEGjJFwK4MMikqyQ'

            },
            // params:{
            //   filmId,
            //   cinemaId,
            //   date,
            //   k: 2588482,
            // }
          }
        )
        .then((res) => {
          that.scheduleList = res.data.data.schedules;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    back() {
      this.$router.back();
    },
   
    // 跳转影院介绍页
    tocinemaInfo() {
      this.$router.push({
        path: "/cinemaInfo/:id",
      
      });
    },
    // 跳转登陆页
    toLogin(scheduleId) {
      // 通过token进行判断是不是进行了登录
      if(!this.token){
        this.$router.push({
           path: "/login",
        })
      }else{
        let cinemaId = Number(this.$route.params.id);
      let filmId = this.currentFilm.filmId;
        this.$router.push({
          path:this.$route.path+"/"+this.currentFilm.showDate[this.currentStyle],
          query:{
            scheduleId,
            cinemaId,
            filmId
          }
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.swiper-img {
  width: 90px;
  height: 120px;
}
.Schedule {
  height: 100%;
  overflow: auto;
}
.schedule-back {
  height: 44px;
  padding-left: 15px;
  padding-top: 15px;
  flex-grow: 1;
  flex-shrink: 0;
  img {
    width: 11px;
    height: 18px;
  }
}
.schedule-title {
  height: 44px;
  text-align: center;
  line-height: 44px;
}

.schedule-main {
  &-top {
    color: #ffb232;
    display: flex;
    justify-content: space-between;
    padding: 0 16px;
    span {
      font-size: 17px;
    }
    div {
      border-bottom: 1px solid #fcc978;
      border-right: 1px solid #fcc978;
      padding: 0 5px;
    }
  }
  &-area {
    display: flex;
    justify-content: space-between;
    padding: 15px;
    margin-top: 15px;
    align-items: center;
    font-size: 14px;
    border-top: 1px solid #ededed;

    &-left {
      display: flex;
      img {
        width: 14px;
        height: 21px;
        margin-right: 10px;
      }
    }
    .ellipsis {
      width: 70%;
    }
    &-right {
      border-left: 1px solid #ededed;
      padding-left: 22px;
      img {
        height: 17px;
        width: 18px;
      }
    }
  }
}

.schedule-wrap {
  height: 160px;
  position: relative;
  &-list {
    padding: 15px 0;
    background-color: rgb(230, 230, 230);
    img {
      height: 130px;
      width: 90px;
    }
  }
  &-triangle {
    z-index: 2;
    position: absolute;
    left: 45%;
    bottom: 0;
    width: 20px;
    height: 10px;
  }
}
.schedule-info {
  height: 80px;
  padding: 15px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  border-bottom: 1px solid #ededed;

  &-title {
    span:nth-child(2) {
      font-style: italic;
      color: #ffb232;
    }
  }
  &-detail {
    color: #797d82;
    width: 95%;
    padding: 10px 45px 0;
  }
  &-more {
    width: 4px;
    height: 8px;
    position: absolute;
    top: 30px;
    right: 18px;
  }
}
.cinema-list {
  &-date {
    border-bottom: 1px solid #ededed;
    padding: 15px 15px;
  }
  &-buy {
    &-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px 15px;
      border-bottom: 1px solid #ededed;
      &-right {
        display: flex;
        color: #ff5f16;
      }
    }
  }
}
.cinema-list-buy-ticket {
  border: 1px solid #ff5f16;
  height: 25px;
  line-height: 24px;
  width: 50px;
  text-align: center;
  border-radius: 2px;
}
.colorg {
  color: #797d82;
  margin-top: 5px;
}
.current {
  border-bottom: 2px solid #ff5f16;
  padding-bottom: 10px;
  text-align: center;
}
</style>
